<template>
  <my-card title="修改密码">
    <template slot>
      <div class="password-page">
        <el-form
          :model="formData"
          ref="form"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item>
            <div class="item-title-box">详细信息</div>
          </el-form-item>
          <el-form-item label="旧密码：" prop="oldPassword">
            <el-input v-model="formData.oldPassword" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="password">
            <el-input v-model="formData.password" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="donePwd">
            <el-input v-model="formData.donePwd" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <div class="bottom-btn-box">
              <el-button type="primary" @click="hkSubmit">确认修改</el-button>
              <!-- <el-button>返回</el-button> -->
            </div>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </my-card>
</template>

<script>
import MyCard from "@/components/my-card/index";
import {
  hkHidLoading,
  hkShowErrorText,
  hkShowLoading,
  hkShowSuccessText
} from "@/utils/tools";
import { hkPost, hkPut } from "@/api/http";
import { httpApi } from "@/api/api";
import { AES_CBC_encrypt } from "@/utils/aes";

export default {
  components: { MyCard },
  props: {},
  data() {
    return {
      formData: {
        password: "",
        oldPassword: "",
        donePwd: ""
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入新密码",
            trigger: ["blur", "change"]
          }
        ],
        oldPassword: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: ["blur", "change"]
          }
        ],
        donePwd: [
          {
            required: true,
            message: "请确认密码",
            trigger: ["blur", "change"]
          },
          {
            trigger: ["blur"],
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请确认密码"));
              } else if (value != this.formData.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    hkSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = {
            password: AES_CBC_encrypt(this.formData.password),
            oldPassword: AES_CBC_encrypt(this.formData.oldPassword)
          };
          hkShowLoading("修改中...");
          hkPut(httpApi.changePwd, params)
            .then(res => {
              hkHidLoading();
              hkShowSuccessText("修改成功！");
            })
            .catch(err => {
              hkHidLoading();
              hkShowErrorText(err.message);
            });
        } else {
          return false;
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.password-page {
  width: 700px;
  margin: 0 auto;
  .item-title-box {
    text-align: center;
  }
  .bottom-btn-box {
    text-align: center;
  }
}
</style>
